<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>幸运大转盘</title>
  <style>
    body {
      display: flex;
      flex-direction: column;
      align-items: center;
      background: #f83;
      margin: 0;
      padding: 20px 0;
      font-family: "微软雅黑", sans-serif;
      min-height: 100vh;
    }
    h1 {
      color: #fff;
      margin-bottom: 30px;
      text-shadow: 0 2px 4px rgba(0,0,0,0.3);
      font-size: 28px;
    }
    .wheel-container {
      position: relative;
      width: 320px;
      height: 320px;
      margin-bottom: 10px;
    }
    .wheel {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      overflow: hidden;
      transition: transform 3s cubic-bezier(0.3, 0, 0.7, 1); /* 固定旋转速度和缓动函数 */
      box-shadow: 0 8px 20px rgba(0,0,0,0.2);
    }
    .pointer {
      position: absolute;
      top: -15px;
      left: 50%;
      width: 24px;
      height: 70px;
      background: #fff;
      transform: translateX(-50%);
      clip-path: polygon(50% 0, 0 100%, 100% 100%);
      z-index: 10;
      box-shadow: 0 0 10px rgba(0,0,0,0.3);
      filter: drop-shadow(0 3px 5px rgba(0,0,0,0.3));
    }
    .btn-group {
      margin-top: 20px;
      display: flex;
      gap: 15px;
    }
    button {
      padding: 12px 25px;
      font-size: 18px;
      background: #fff;
      border: none;
      border-radius: 30px;
      cursor: pointer;
      transition: all 0.3s;
      font-weight: bold;
      box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    }
    button:hover {
      transform: translateY(-3px);
      box-shadow: 0 6px 12px rgba(0,0,0,0.25);
    }
    button:active {
      transform: translateY(1px);
    }
    #startBtn {
      background: linear-gradient(to bottom, #4CAF50, #2E7D32);
      color: white;
    }
    #startBtn:disabled {
      background: linear-gradient(to bottom, #a5d6a7, #81c784);
      opacity: 0.7;
    }
    #endBtn {
      background: linear-gradient(to bottom, #F44336, #C62828);
      color: white;
    }
    #endBtn:disabled {
      background: linear-gradient(to bottom, #ef9a9a, #e57373);
      opacity: 0.7;
    }
    .result {
      margin-top: 25px;
      padding: 15px 40px;
      background: rgba(255,255,255,0.15);
      border-radius: 50px;
      color: #fff;
      font-size: 24px;
      font-weight: bold;
      text-align: center;
      min-width: 300px;
      backdrop-filter: blur(5px);
      border: 2px solid rgba(255,255,255,0.3);
      box-shadow: 0 4px 15px rgba(0,0,0,0.15);
    }
    .counter {
      margin-top: 15px;
      padding: 8px 20px;
      background: rgba(255,255,255,0.15);
      border-radius: 30px;
      font-size: 16px;
    }
    .footer {
      margin-top: 20px;
      color: rgba(255,255,255,0.7);
      font-size: 14px;
    }
  </style>
</head>
<body>
  <h1>幸运大转盘</h1>
  <div class="wheel-container">
    <div class="wheel" id="wheel">
      <canvas id="wheelCanvas" width="320" height="320"></canvas>
    </div>
    <div class="pointer"></div>
  </div>
  <div class="btn-group">
    <button id="startBtn">点击开始</button>
    <button id="endBtn" disabled>点击结束</button>
  </div>
  <div class="result" id="result">等待抽奖...</div>
  <div class="counter">今日剩余抽奖次数: <span id="counter">3</span> 次</div>
  <div class="footer">祝您好运！</div>

  <script>
    // 获取DOM元素
    const wheel = document.getElementById('wheel');
    const canvas = document.getElementById('wheelCanvas');
    const ctx = canvas.getContext('2d');
    const startBtn = document.getElementById('startBtn');
    const endBtn = document.getElementById('endBtn');
    const resultDom = document.getElementById('result');
    const counterSpan = document.getElementById('counter');

    // 初始化抽奖次数（最多3次）
    let clickCounter = 3;

    // 奖品配置（与图片完全匹配的7个奖项）
    const prizes = [
      { color: '#ffd700', name: '美女视频2个' },
      { color: '#ffd700', name: '美女写真+2' },
      { color: '#c0c0c0', name: '美女视频1个' },
      { color: '#cd7f32', name: '好运+100' },
      { color: '#cd7f32', name: '美女写真+1' },
      { color: '#ff6347', name: '谢谢参与' },
      { color: '#90ee90', name: '制作明星音色一个' }
    ];

    // 绘制转盘
    function drawWheel() {
      const centerX = canvas.width / 2;
      const centerY = canvas.height / 2;
      const radius = Math.min(centerX, centerY) - 15;
      const angleStep = (Math.PI * 2) / prizes.length;

      ctx.clearRect(0, 0, canvas.width, canvas.height);

      // 绘制扇形和文字
      prizes.forEach((prize, index) => {
        const startAngle = index * angleStep;
        const endAngle = (index + 1) * angleStep;

        // 绘制扇形
        ctx.beginPath();
        ctx.moveTo(centerX, centerY);
        ctx.arc(centerX, centerY, radius, startAngle, endAngle);
        ctx.closePath();
        ctx.fillStyle = prize.color;
        ctx.fill();
        ctx.strokeStyle = '#fff';
        ctx.lineWidth = 2;
        ctx.stroke();

        // 绘制文字
        ctx.save();
        ctx.translate(centerX, centerY);
        ctx.rotate(startAngle + angleStep / 2);
        ctx.fillStyle = '#000';
        ctx.font = 'bold 13px 微软雅黑';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';
        ctx.fillText(prize.name, radius * 0.7, 0);
        ctx.restore();
      });

      // 绘制中心圆
      ctx.beginPath();
      ctx.arc(centerX, centerY, 20, 0, Math.PI * 2);
      ctx.fillStyle = '#fff';
      ctx.fill();
      ctx.strokeStyle = '#ff5e62';
      ctx.lineWidth = 3;
      ctx.stroke();

      // 绘制中心小圆
      ctx.beginPath();
      ctx.arc(centerX, centerY, 10, 0, Math.PI * 2);
      ctx.fillStyle = '#ff5e62';
      ctx.fill();
    }

    // 初始化转盘
    drawWheel();

    // 转盘控制变量
    let isRotating = false;
    let rotateDeg = 0;
    let currentTransition = null;
    let animationId = null;

    // 固定旋转参数
    const SPIN_DURATION = 3; // 旋转时间固定为3秒
    const SPIN_EASING = 'cubic-bezier(0.3, 0, 0.7, 1)'; // 固定缓动函数

    // 更新剩余次数显示
    function updateCounter() {
      counterSpan.textContent = clickCounter;
    }

    // 初始化时更新次数显示
    updateCounter();

    // 开始按钮逻辑
    startBtn.addEventListener('click', () => {
      // 检查剩余次数
      if (clickCounter <= 0) {
        resultDom.textContent = "今日抽奖次数已用完！";
        return;
      }

      if (isRotating) return;

      clickCounter--;
      updateCounter();

      isRotating = true;
      startBtn.disabled = true;
      endBtn.disabled = false;
      resultDom.textContent = '旋转中...';
      resultDom.style.background = 'rgba(255,255,255,0.15)';

      // 清除之前的过渡
      if (currentTransition) {
        cancelAnimationFrame(animationId);
        wheel.style.transition = 'none';
        wheel.style.transform = `rotate(${rotateDeg}deg)`;
      }

      // 随机生成一个最终旋转角度（确保至少3圈）
      const extraDegrees = 1080 + Math.floor(Math.random() * 360);
      rotateDeg += extraDegrees;

      // 应用旋转动画（固定时间和缓动函数）
      wheel.style.transition = `transform ${SPIN_DURATION}s ${SPIN_EASING}`;
      wheel.style.transform = `rotate(${rotateDeg}deg)`;
      currentTransition = wheel.style.transition;

      // 检查次数是否用完
      if (clickCounter <= 0) {
        startBtn.textContent = "次数已用完";
      }
    });

    // 结束按钮逻辑
    endBtn.addEventListener('click', () => {
      if (!isRotating) return;

      // 获取当前旋转角度
      const computedStyle = window.getComputedStyle(wheel);
      const matrix = new DOMMatrix(computedStyle.transform);
      const angle = Math.atan2(matrix.b, matrix.a) * (180 / Math.PI);

      // 计算实际奖品
      const normalizedAngle = (angle % 360 + 360) % 360;
      const anglePerPrize = 360 / prizes.length;

      // 计算奖品索引（使指针精确指向奖品中心）
      const prizeIndex = Math.floor((normalizedAngle + anglePerPrize/2) / anglePerPrize);
      const prize = prizes[prizeIndex % prizes.length];

      // 应用结束动画（使用不同的缓动函数）
      wheel.style.transition = 'transform 0.8s ease-out';

      // 计算并应用精确的停止位置
      const targetAngle = prizeIndex * anglePerPrize;
      const rotationDelta = targetAngle - normalizedAngle;
      rotateDeg += rotationDelta;
      wheel.style.transform = `rotate(${rotateDeg}deg)`;

      // 显示结果
<!--      resultDom.textContent = `恭喜获得：${prize.name}`;-->
      resultDom.style.background = 'rgba(255,255,255,0.25)';

      // 更新状态
      isRotating = false;
      startBtn.disabled = false;
      endBtn.disabled = true;
    });

    // 监听旋转结束事件
    wheel.addEventListener('transitionend', (e) => {
      if (e.propertyName !== 'transform') return;

      // 设置转盘恢复到非旋转状态
      isRotating = false;
      startBtn.disabled = false;
      endBtn.disabled = true;

      if (clickCounter <= 0) {
        startBtn.textContent = "次数已用完";
        startBtn.disabled = true;
      }
    });
  </script>
</body>
</html>